<template>
  <div class="page_root" data-page-name="备份项目模板维护" data-page-identification="b_m730qrjod4">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_tmbu89crd9 自定义模板_eqthivse55 -->
      <a-row :slots="'4:20'">
        <a-col :span="4" class="left-article">
          <a-row>
            <al-box justify="between">
              <div style="font-size: 14px;font-weight: bold">目录列表</div>
              <span @click="handleTemplateManagerOpen" style="cursor: pointer;color:rgba(56, 117, 255, 1);border-style:none">管理</span>
            </al-box>
          </a-row>
          <al-box class="search">
            <a-input autocomplete="off" v-model:value="state.templateName" placeholder="请输入" :allowClear="true" @change="getTemplateList">
              <template #suffix>
                <search-outlined />
              </template>
            </a-input>
          </al-box>
          <al-box class="tree" style="height: 800px;overflow: auto">
            <al-tree-extend
              v-model:checkedKeys="state.treeProps.checkedKeys"
              v-model:selectedKeys="state.treeProps.selectedKeys"
              v-model:expandedKeys="state.treeProps.expandedKeys"
              :fieldNames="{'children':'children','title':'templateName','key':'templateId'}"
              :selectedBackgroundColor="'#EBF1FF'"
              :backgroundColor="'#F5F5F5'"
              :expandIcon="''"
              :dropIcon="''"
              :lazyParams="state.treeProps.lazyParams"
              :clickNode="state.treeProps.clickNode"
              :selected="state.treeProps.selected"
              :treeData="state.templateList"
              @select="handleTreeSelect"
              style="--background-hover: #F5F5F5; --background-select: #EBF1FF;margin-left: -10px"
            >
            </al-tree-extend>
          </al-box>
        </a-col>
        <a-col :span="20" class="right-article">
          <al-box justify="between" style="margin-bottom: 16px;">
            <div class="text">模板详情</div>
            <div>
              <a-button type="primary" style="margin-right: 20px" @click="handleOpenStageModal">项目阶段维护</a-button>
              <a-button type="primary" @click="handleAddTask">新建任务</a-button>
            </div>
          </al-box>
          <al-box class="table-wrapper">
            <a-table
              class="vid_a7g6eyj5wh"
              :bordered="true"
              :data-source="state.templateDetailList"
              :columns="state.tableProps.columns"
              :pagination="false"
              :scroll="{ x: scrollX, y: state.templateDetailList.length ? '637px' : '' }"
              @resizeColumn="handleTaskResizeColumn"
            >
              <template #bodyCell="{ column, record, text }">
                <template v-if="column.dataIndex === 'stageName'">
                  {{ record.stageSerialNumber + '.' + record.stageName }}
                </template>
                <template v-if="state.tableProps.formatColumnsList.includes(column.dataIndex)">
                  <a-tooltip placement="top" :overlayStyle="{ maxWidth: 'unset' }" color="#fff">
                    <template #title>
                      <p style="color:#262626;margin:0" v-for="(item,index) in formatStringBySemi(text)" :key="index"> {{ item }}</p>
                    </template>
                    <div class="table-text">{{ text }}</div>
                  </a-tooltip>
                </template>
                <template v-if="column.dataIndex === 'attachmentList'">
                  <div class="ellipsis download-text" type="link" v-for="(item, index) in record.attachmentList" :key="index" @click="downloadFile(item)" :title="item.name">{{ item.name }} </div>
                </template>
                <template v-if="column.dataIndex === 'operate'">
                  <a-button style="padding: 0" size="small" type="link" @click="handleEditTask(record)"> 编辑</a-button>
                  <a-divider style="margin:0 10px;border-color: #3875FF" type="vertical" />
                  <a-popconfirm title="是否确认删除该任务？确认后对应任务的所有数据全部删除" @confirm="handleDeleteTask(record.templateTaskId)">
                    <a-button type="link">删除</a-button>
                  </a-popconfirm>
                </template>
              </template>
            </a-table>
          </al-box>
        </a-col>
      </a-row>
      <!-- 管理模版 -->
      <a-modal v-model:visible="state.templateManagerVisible" :title="'管理模版'" :width="860" :maskClosable="false" :centered="true" :destroy-on-close="true" @ok="handleTemplateManagerOk">
        <a-form ref="templateRef1" name="dynamic_form_item" :model="state" :rules="state.templateRules">
          <a-row :gutter="24" v-for="(item, index) in state.modalTemplateList" :key="item.uid">
            <a-col :span="10">
              <a-form-item label="模版名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :name="['modalTemplateList', index, 'templateName']" :rules="state.templateRules.templateName">
                <a-input v-model:value="item.templateName" placeholder="请输入" :maxlength="12" :disabled="item.status === '上线'" />
              </a-form-item>
            </a-col>
            <a-col :span="10">
              <a-form-item label="模版编码" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :name="['modalTemplateList', index, 'templateCode']" :rules="state.templateRules.templateCode">
                <a-input v-model:value="item.templateCode" placeholder="请输入" :maxlength="8" :disabled="!!item.templateId" />
              </a-form-item>
            </a-col>
            <a-col :span="3">
              <a-form-item :name="['modalTemplateList', index, 'status']" :wrapper-col="{ span: 24 }">
                <a-switch
                  checked-children="正式"
                  un-checked-children="草稿"
                  :disabled="!item.templateId"
                  :loading="state.templateStatusLoadingId === item.templateId"
                  :checked="item.status === '上线'"
                  @change="event => handleSwitchChange(event, item)"
                />
              </a-form-item>
            </a-col>
            <a-col :span="1">
              <a-button type="link" class="template-delete" :disabled="item.status === '上线'" @click="handleDeleteTemplate(index, item)" size="small">删除 </a-button>
            </a-col>
            <a-form-item :name="['modalTemplateList', index, 'templateId']">
              <a-input v-model:value="item.templateId" :maxlength="20" disabled type="hidden" />
            </a-form-item>
          </a-row>
        </a-form>
        <a-button type="primary" ghost class="addRowBtn" @click="handleAddTemplate">
          <template #icon>
            <plus-outlined />
          </template>
          新增
        </a-button>
      </a-modal>
      <!-- 项目阶段维护 -->
      <a-modal
        v-model:visible="state.projectStageVisible"
        title="项目阶段维护"
        :width="850"
        :maskClosable="false"
        :centered="true"
        :body-style="{ maxHeight: '700px', overflow: 'auto' }"
        @ok="handleStageManagerOk"
      >
        <a-form ref="templateRef2" :model="state" :rules="state.stageRules">
          <a-row :gutter="24" v-for="(item, index) in state.templateStageList" :key="item.uid">
            <a-col :span="11">
              <a-form-item label="项目阶段名称" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }" :name="['templateStageList', index, 'stageName']" :rules="state.stageRules.stageName">
                <a-input v-model:value="item.stageName" placeholder="请输入" :maxlength="20" />
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item label="项目阶段序号" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }" :name="['templateStageList', index, 'serialNumber']" :rules="state.stageRules.serialNumber">
                <a-input v-model:value="item.serialNumber" placeholder="请输入" :maxlength="4" :disabled="!!item.templateStageId" />
              </a-form-item>
            </a-col>
            <a-col :span="1">
              <a-button style="margin-left: 0" type="link" class="template-delete" @click="handleDeleteStage(index, item)" size="small">删除 </a-button>
            </a-col>
            <a-form-item :name="['templateStageList', index, 'templateStageId']">
              <a-input v-model:value="item.templateStageId" :maxlength="20" disabled type="hidden" />
            </a-form-item>
          </a-row>
        </a-form>
        <a-button type="primary" ghost class="addRowBtn" @click="handleAddStage">
          <template #icon>
            <plus-outlined />
          </template>
          新增
        </a-button>
      </a-modal>
      <!-- 新建任务 -->
      <a-modal
        v-model:visible="state.taskVisible"
        :title="state.modalTaskTitle"
        :width="900"
        :maskClosable="false"
        :centered="true"
        okText="保存"
        class="task-modal"
        :destroy-on-close="true"
        :body-style="state.bodyStyle"
        @ok="handleTaskOk"
      >
        <a-form :model="state.taskForm" ref="templateRef3" class="task-form" :rules="state.taskRules">
          <div class="title">基础信息</div>
          <a-row>
            <a-col :span="12">
              <a-form-item label="所属项目阶段" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="templateStageId">
                <a-select v-model:value="state.taskForm.templateStageId" placeholder="请选择">
                  <a-select-option v-for="(item) in state.templateStageList" :value="item.templateStageId">
                    {{ item.stageName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item label="任务名称" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" name="taskName">
                <a-input v-model:value="state.taskForm.taskName" :maxlength="20" placeholder="请输入" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="任务序号" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="serialNumber">
                <a-input v-model:value="state.taskForm.serialNumber" :maxlength="4" placeholder="请输入" :disabled="state.taskForm.templateTaskId" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="人天" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="workingHours">
                <a-input v-model:value="state.taskForm.workingHours" :maxlength="8" placeholder="请输入" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row style="margin: 1px 0 5px">
            <a-col :span="12">
              <a-form-item label="标记" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="mark">
                <a-radio-group v-model:value="state.taskForm.mark">
                  <a-radio value="">无</a-radio>
                  <a-radio value="里程碑">里程碑</a-radio>
                  <a-radio value="初验">初验</a-radio>
                  <a-radio value="终验">终验</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row style="margin: 0px 0 -4px">
            <a-col :span="12">
              <a-form-item label="任务周期分类" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="periodClassify">
                <a-radio-group v-model:value="state.taskForm.periodClassify" :disabled="state.radioDisabled">
                  <a-radio value="T" style="margin-right: 16px">T</a-radio>
                  <a-radio value="N">N</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <span class="tips" style="margin-left: -183px;padding-top: 24px;line-height: 1;">
              <exclamation-circle-outlined />
              N为项目开始的时间，T为启动会开始时间，例：N+3、T+5
            </span>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="开始时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="periodClassifyStart" style="display: flex;justify-content: center">
                <span style="display: inline-block;margin-right: 11px;width:23px;"
                  >{{ state.taskForm.periodClassify

                  }}+</span
                >
                <a-input style="width: 89%" v-model:value="state.taskForm.periodClassifyStart" :maxlength="10000" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="结束时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="periodClassifyEnd">
                <span style="display: inline-block;margin-right: 11px;width:23px;"
                  >{{ state.taskForm.periodClassify

                  }}+</span
                >
                <a-input style="width: 89%" v-model:value="state.taskForm.periodClassifyEnd" :maxlength="20" placeholder="请输入" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="任务负责人" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="directorRole">
                <a-select v-model:value="state.taskForm.directorRole" placeholder="请选择" :options="directorRoleList"></a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="审核员" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="auditorRole">
                <a-select v-model:value="state.taskForm.auditorRole" placeholder="请选择" :options="auditorRoleList"></a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-divider style="margin-top: 5px" />
          <div class="title"><span style="font-size: 14px;color: #ff4d4f;margin-right: 4px;">*</span>完成标准</div>
          <a-row>
            <a-col :span="24">
              <a-form-item :wrapper-col="{ span: 24 }" name="finishStandard">
                <a-textarea :maxlength="1000" :rows="3" v-model:value="state.taskForm.finishStandard" placeholder="请输入" />
              </a-form-item>
              <div class="tips" style="margin-top: -4px">
                请用”；“号区分不同细项的内容，格式参考：<br />
                1）设计反讲机制及频率、并执行；<br />
                2）通过反讲，确认研发、产品、测试和现场项目人员等各角色均已对产品设计形成统一认知；
              </div>
            </a-col>
          </a-row>
          <a-divider style="margin-top: 5px" />
          <div class="title">审核标准</div>
          <a-row>
            <a-col :span="24">
              <a-form-item :wrapper-col="{ span: 24 }" name="assessorStandard">
                <a-textarea :maxlength="1000" :rows="3" v-model:value="state.taskForm.assessorStandard" placeholder="请输入" />
              </a-form-item>
              <div class="tips">
                请用”；“号区分不同细项的内容，格式参考：<br />
                1）设计反讲机制及频率、并执行；<br />
                2）通过反讲，确认研发、产品、测试和现场项目人员等各角色均已对产品设计形成统一认知；
              </div>
            </a-col>
          </a-row>
          <a-divider />
          <div class="title">甲方工作事项</div>
          <a-row>
            <a-col :span="24">
              <a-form-item :wrapper-col="{ span: 24 }" name="workItem">
                <a-textarea :maxlength="1000" :rows="3" v-model:value="state.taskForm.workItem" placeholder="请输入" />
              </a-form-item>
              <div class="tips">
                请用”；“号区分不同细项的内容，格式参考：<br />
                1）设计反讲机制及频率、并执行；<br />
                2）通过反讲，确认研发、产品、测试和现场项目人员等各角色均已对产品设计形成统一认知；
              </div>
            </a-col>
          </a-row>
          <a-divider />
          <div class="title">注意事项</div>
          <a-row>
            <a-col :span="24">
              <a-form-item :wrapper-col="{ span: 24 }" name="note">
                <a-textarea :maxlength="1000" :rows="3" v-model:value="state.taskForm.note" placeholder="请输入" />
              </a-form-item>
              <div class="tips">
                请用”；“号区分不同细项的内容，格式参考：<br />
                1）设计反讲机制及频率、并执行；<br />
                2）通过反讲，确认研发、产品、测试和现场项目人员等各角色均已对产品设计形成统一认知；
              </div>
            </a-col>
          </a-row>
          <a-divider style="border-color: #D9D9D9;" />
          <div class="title">模板附件</div>
          <a-row>
            <a-col :span="24">
              <a-form-item :wrapper-col="{ span: 24 }" name="attachmentList">
                <al-upload
                  class="vid_spssk40x2b"
                  :uploadFile="state.uploadProps.uploadFile"
                  v-model:fileList="state.taskForm.attachmentList"
                  :multiple="true"
                  :textContent="'新增'"
                  :accept="'image/*,.xlsx,.xls,.docx,.pdf,.ppt,.pptx,.mp4,.doc,.mp3'"
                  :action="'/file-storage/api/v1/file/upload'"
                >
                </al-upload>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item label="备注" :label-col="{ span: 24 }" :wrapper-col="{ span: 24 }" name="description">
                <a-textarea :maxlength="200" v-model:value="state.taskForm.description" placeholder="请输入" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>
      <!-- end vid_tmbu89crd9 自定义模板_eqthivse55 -->
    </a-spin>
  </div>
</template>
<script setup>
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    



      // 获取传入的流程ID
      const props = defineProps({
        processInstanceId: {
            type: String
        }
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');




      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */

  /* ========================== 页面数据 ========================== */


  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  onMounted(() => { ;

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  const validateTemplateCode = (rule, value, name) => {
          if (value) {
              const reg = new RegExp(/^(0|([1-9][0-9]*))(\.\d{2})?$/)
              if (!reg.test(value)) {
                  return Promise.reject('请输入小数点后两位以内的正数数字')
              } else {
                  return Promise.resolve()
              }
          } else {
              return Promise.reject('请输入模板编码')
          }
      }
      const validateStageCode = (rule, value) => {
          if (value) {
              const reg = new RegExp(/^(0|([1-9][0-9]*))(\.\d{1,2})?$/)
              if (!reg.test(value)) {
                  return Promise.reject('请输入小数点后两位以内的正数数字')
              } else {
                  return Promise.resolve()
              }
          } else {
              return Promise.reject('请输入项目阶段序号')
          }
      }

      const workingHoursValidate = async (rule, value, callback) => {
          if (!value) {
              return Promise.reject('请输入人天')
          }
          if (!/^[1-9]\d*\.5$|0\.5$|^[1-9]\d*$/.test(value)) {
              return Promise.reject(new Error('请输入0.5为倍数的正数数字'))
          }
      }

      const timeValidate = async (rule, value, callback) => {
          if (!value) {
              return Promise.reject('请输入')
          }
          if (!/^[0-9]{1,4}$/.test(value)) {
              return Promise.reject(new Error('请输入0-10000以内的整数数字'))
          }
      }
      const directorRoleList = [
          { value: '项目经理', label: '项目经理' },
          { value: '商务经理', label: '商务经理' },
          { value: '数据治理工程师', label: '数据治理工程师' },
          { value: '产品经理', label: '产品经理' },
          { value: '技术经理', label: '技术经理' },
          { value: '测试经理', label: '测试经理' },
          { value: '项目总监', label: '项目总监' }
      ]

      const initTaskForm = () => ({
          templateStageId: undefined, //项目阶段id
          templateTaskId: undefined, //任务id
          taskName: undefined, //任务名称
          serialNumber: undefined, //任务序号
          workingHours: undefined, //预计投入工时/人天
          mark: '', //标记
          periodClassify: 'T', //周期分类
          periodClassifyStart: undefined, //周期分类开始时间
          periodClassifyEnd: undefined, //周期分类结束时间
          directorRole: undefined, //负责人角色
          auditorRole: undefined, //审核员角色
          finishStandard: undefined, //完成标准
          assessorStandard: undefined, //审核标准
          workItem: undefined, //甲方工作事项
          note: undefined, //注意事项
          attachmentList: [], //附件
          description: undefined //备注
      })

      const auditorRoleList = [
          { value: '项目总监', label: '项目总监' },
          { value: 'PMO', label: 'PMO' },
          { value: '副总裁', label: '副总裁' },
          { value: '数据实施总监', label: '数据实施总监' },
          { value: '项目经理', label: '项目经理' },
          { value: '产品经理', label: '产品经理' },
          { value: '技术经理', label: '技术经理' }
      ]

      const state = reactive({
          approveStatus: '',
          title: '',
          templateManagerVisible: false,
          projectStageVisible: false,
          isEdit: false,
          bodyStyle: {
              height: '700px',
              overflow: 'auto',
              padding: '24px 24px 0px 24px'
          },
          taskVisible: false,
          templateName: '',
          treeProps: {
              lazyParams: undefined,
              selected: { singleValue: '', title: [], value: [], option: [], singleLabel: '' },
              clickNode: { nodeTitle: '', nodeKey: '', nodeParentKey: '' },
              checkedKeys: [],
              selectedKeys: [],
              expandedKeys: [],
              treeData: []
          },
          tableProps: {
              columns: [
                  {
                      title: '项目阶段',
                      dataIndex: 'stageName',
                      ellipsis: true,
                      align: 'left',
                      width: '140px',
                      fixed: 'left',
                      customCell: item => {
                          const { rowIndex, rowSpan } = item
                          return {
                              rowSpan: rowSpan,
                              style: {
                                  fontSize: '16px',
                                  color: '#262626',
                                  fontWeight: '600',
                                  borderTop: rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '任务序号',
                      dataIndex: 'serialNumber',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '任务名称',
                      dataIndex: 'taskName',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '完成标准',
                      dataIndex: 'finishStandard',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '审核标准',
                      dataIndex: 'assessorStandard',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '注意事项',
                      dataIndex: 'note',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '甲方工作事项',
                      dataIndex: 'workItem',
                      ellipsis: true,
                      align: 'center',
                      width: '150px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '任务负责人（角色）',
                      dataIndex: 'directorRole',
                      ellipsis: true,
                      align: 'center',
                      width: '150px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '审核员（角色）',
                      dataIndex: 'auditorRole',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '开始时间',
                      dataIndex: 'periodClassifyStart',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '结束时间',
                      dataIndex: 'periodClassifyEnd',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '人天',
                      dataIndex: 'workingHours',
                      ellipsis: true,
                      align: 'center',
                      width: '80px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '模板附件',
                      dataIndex: 'attachmentList',
                      ellipsis: true,
                      align: 'center',
                      width: '140px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '标记',
                      dataIndex: 'mark',
                      ellipsis: true,
                      align: 'center',
                      width: '80px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '备注',
                      dataIndex: 'description',
                      ellipsis: true,
                      align: 'center',
                      width: '80px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '操作',
                      dataIndex: 'operate',
                      align: 'center',
                      fixed: 'right',
                      width: '150px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  }
              ],
              formatColumnsList: ['finishStandard', 'assessorStandard', 'note', 'workItem']
          },
          templateList: [],
          // 模板下阶段
          templateStageList: [],
          // 包含项目阶段和任务详情
          templateDetailList: [],
          // 当前模版
          currentTemplateInfo: null,
          currentStageId: null,
          currentTemplateTaskList: [],
          templateRules: {
              templateName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
              templateCode: [{ required: true, validator: validateTemplateCode, trigger: 'blur' }]
          },
          stageRules: {
              stageName: [{ required: true, message: '请输入项目阶段名称', trigger: 'blur' }],
              serialNumber: [{ required: true, validator: validateStageCode, trigger: 'blur' }]
          },
          taskRules: {
              templateStageId: [{ required: true, message: '请选择所属项目阶段', trigger: 'blur' }],
              taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
              serialNumber: [{ required: true, message: '请输入任务序号', trigger: 'blur' }],
              workingHours: [{ required: true, validator: workingHoursValidate, trigger: 'blur' }],
              mark: [{ message: '请选择标记', trigger: 'blur' }],
              periodClassify: [{ required: true, message: '请选择周期分类', trigger: 'blur' }],
              periodClassifyStart: [{ required: true, validator: timeValidate, trigger: 'blur' }],
              periodClassifyEnd: [{ required: true, validator: timeValidate, trigger: 'blur' }],
              directorRole: [{ required: true, message: '请选择任务负责人', trigger: 'blur' }],
              auditorRole: [{ required: true, message: '请选择审核员', trigger: 'blur' }],
              finishStandard: [{ required: true, message: '请输入完成标准', trigger: 'blur' }]
          },
          modalTemplateList: {},
          modalStageList: [],
          templateStatusLoadingId: undefined,
          modalTaskTitle: '新建任务',
          editTaskId: null,
          taskForm: initTaskForm(),
          uploadProps: {
              uploadFile: data =>
                  request({
                      url: '/file-storage/api/v1/file/upload',
                      method: 'POST',
                      responseType: 'blob',
                      withCredentials: false,
                      data,
                      timeout: 360000,
                      headers: {}
                  })
          },
          radioDisabled: false
      })

      const templateRef1 = ref()
      const templateRef2 = ref()
      const templateRef3 = ref()

      watch(
          () => state.templateList,
          list => {
              if (!list.length) {
                  return
              }
              state.treeProps.selectedKeys = [list[0].templateId]
              getTaskList(getStatusPrefix(list[0].templateId))
              getTemplateDetail(getStatusPrefix(list[0].templateId))
          },
          { deep: true, immediate: true }
      )

      const handleTemplateManagerOpen = () => {
          state.title = '新建模板'
          state.isEdit = false
          state.modalTemplateList = {
              templateId: null,
              templateName: undefined,
              templateCode: undefined,
              status: '下线',
              uid: $guid()
          }

          state.templateManagerVisible = true
      }
      function handleEditTemplate(templateId) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/project/template/detail/${templateId}`).then(data => {
              if (data.code === 200) {
                  if (data.data.status === '上线') {
                      message.info('请下线模板后在进行编辑')
                  } else {
                      state.modalTemplateList.templateName = data.data.templateName
                      state.modalTemplateList.templateCode = data.data.templateCode
                      state.modalTemplateList.templateId = data.data.templateId
                      state.title = '编辑模板'
                      state.isEdit = true
                      state.templateManagerVisible = true
                  }
              } else {
                  message.error(data.message)
              }
          })
      }
      function handleTaskResizeColumn(w, col) {
          col.width = w
      }

      const scrollX = state.tableProps.columns.reduce((pre, cur) => {
          return parseInt(pre.width) + parseInt(cur.width)
      }, {})

      const handleTreeSelect = selectKeys => {
          getTaskList(getStatusPrefix(selectKeys[0]))
          getTemplateDetail(getStatusPrefix(selectKeys[0]))
      }
      function getTemplateDetail(templateId) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/project/template/detail/${templateId}`).then(data => {
              state.approveStatus = data.data.approvalStatus
          })
      }
      const handleTemplateManagerOk = () => {
          templateRef1.value.validateFields().then(res => {
              if (state.isEdit === false) {
                  //   新建
                  post('/solution-ppm/api/v2/built-in-system-ppm/project/template/create', state.modalTemplateList).then(
                      data => {
                          if (data.code === 200) {
                              message.success('操作成功')
                              state.templateManagerVisible = false
                              getTemplateList()
                          } else {
                              message.error(data.message)
                          }
                      }
                  )
              } else {
                  // 编辑
                  put(`/solution-ppm/api/v2/built-in-system-ppm/project/template/modify`, state.modalTemplateList).then(
                      data => {
                          if (data.code === 200) {
                              message.success('操作成功')
                              state.templateManagerVisible = false
                              getTemplateList()
                          }else{
                            message.info(data.message)
                          }
                      }
                  )
              }
          })
      }

      const handleStageManagerOk = () => {
          templateRef2.value.validateFields().then(res => {
              updateStageList(getStatusPrefix(state.treeProps.selectedKeys[0]), res.templateStageList, () => {
                  getTaskList(getStatusPrefix(state.treeProps.selectedKeys[0]), () => {
                      state.projectStageVisible = false
                      message.success('保存成功')
                  })
              })
          })
      }

      const handleTaskOk = () => {
          templateRef3.value.validateFields().then(res => {
              if (Number(res.periodClassifyStart) > Number(res.periodClassifyEnd)) {
                  message.error('开始时间不能小于结束时间')
                  return
              }
              if (!state.taskForm.templateTaskId) {
                  handleCreateTask()
              } else {
                  handleUpdateTask()
              }
          })
      }

      const handleAddStage = () => {
          state.templateStageList.push({
              stageName: undefined,
              serialNumber: undefined,
              uid: $guid()
          })
      }

      // 打开项目阶段维护
      const handleOpenStageModal = () => {
          if (!state.treeProps.selectedKeys.length) {
              message.info('请先选择模板')
              return
          }
          const currentInfo = state.templateList.find(item => item.templateId === state.treeProps.selectedKeys[0])
          if (currentInfo.status === '上线') {
              message.info('请先下线该模板再继续操作')
              return
          }
          getStageList(getStatusPrefix(state.treeProps.selectedKeys[0]), result => {
              if (!state.templateStageList.length) {
                  state.templateStageList = [
                      {
                          stageName: undefined,
                          serialNumber: undefined,
                          templateStageId: undefined,
                          uid: $guid()
                      }
                  ]
              } else {
                  state.templateStageList = state.templateStageList.map(item => ({
                      ...item,
                      uid: $guid()
                  }))
              }
              state.projectStageVisible = true
          })
      }

      const handleAddTask = () => {
          if (!state.treeProps.selectedKeys.length) {
              message.info('请先选择模板')
              return
          }
          const currentInfo = state.templateList.find(item => item.templateId === state.treeProps.selectedKeys[0])
          if (currentInfo.status === '上线') {
              message.info('请先下线该模板再继续操作')
              return
          }
          getStageList(getStatusPrefix(state.treeProps.selectedKeys[0]), result => {
              state.taskForm = initTaskForm()
              state.modalTaskTitle = '新建任务'
              state.taskVisible = true
              state.radioDisabled = false
          })
      }

      const handleEditTask = record => {
          const currentInfo = state.templateList.find(item => item.templateId === state.treeProps.selectedKeys[0])
          if (currentInfo.status === '上线') {
              message.info('请先下线该模板再继续操作')
              return
          }
          if (!record.attachmentList) {
              record.attachmentList = []
          }
          state.taskForm = cloneDeep(record)

          if (state.taskForm?.periodClassifyStart.indexOf('+') !== -1) {
              state.taskForm.periodClassifyStart = state.taskForm.periodClassifyStart.slice(2)
          }
          if (state.taskForm?.periodClassifyEnd.indexOf('+') !== -1) {
              state.taskForm.periodClassifyEnd = state.taskForm.periodClassifyEnd.slice(2)
          }
          getStageList(getStatusPrefix(state.treeProps.selectedKeys[0]), result => {
              state.modalTaskTitle = '编辑任务'
              state.taskVisible = true
              state.radioDisabled = true
          })
      }

      const handleDeleteTask = taskId => {
          const currentInfo = state.templateList.find(item => item.templateId === state.treeProps.selectedKeys[0])
          if (currentInfo.status === '上线') {
              message.info('请先下线该模板再继续操作')
              return
          }
          // 删除模板任务：DELETE
          del(`/solution-ppm/api/v2/built-in-system-ppm/project/template/task/${taskId}`).then(res => {
              if (res.status === 'fail') {
                  message.error(res.message)
                  return
              }
              message.success('删除成功')
              getTaskList(getStatusPrefix(state.treeProps.selectedKeys[0]), () => {
                  state.taskVisible = false
              })
          })
      }
      // 删除阶段
      const handleDeleteStage = (index, item) => {
          if (state.templateStageList.length <= 1) {
              return
          }
          checkTaskExist(item.templateStageId, result => {
              if (result) {
                  state.projectStageVisible = false
                  Modal.confirm({
                      title: '提示',
                      centered: true,
                      content: '该阶段下包含任务，是否确认删除',
                      onOk() {
                          state.modalStageList.splice(index, 1)
                          state.projectStageVisible = true
                      },
                      onCancel() {
                          state.projectStageVisible = true
                      }
                  })
                  return
              }
              state.templateStageList.splice(index, 1)
          })
      }
      // 模板上线
      function handleOnline(templateId) {
          checkProjectExit(templateId, isExist => {
              if (!isExist) {
                  updateTemplateStatus('上线', templateId, () => {})
              } else {
                  Modal.confirm({
                      title: '提示',
                      centered: true,
                      content: '模板重新发布后将对已关联的模板项目数据做覆盖处理，请确认',
                      onOk() {
                          state.templateStatusLoadingId = templateId
                          updateTemplateStatus('上线', templateId, res => {
                              state.templateStatusLoadingId = undefined
                              getTemplateList()
                          })
                      }
                  })
              }
          })
      }
      // 模板下线
      function handleOffline(templateId) {
          checkProjectExit(templateId, isExist => {
              if (!isExist) {
                  updateTemplateStatus('下线', templateId, () => {})
              } else {
                  Modal.confirm({
                      title: '提示',
                      centered: true,
                      content: '模板下线后新建项目将不再展示该模板，请确认',
                      onOk() {
                          state.templateStatusLoadingId = templateId
                          updateTemplateStatus('下线', templateId, res => {
                              state.templateStatusLoadingId = undefined
                              getTemplateList()
                          })
                      }
                  })
              }
          })
      }
      // 删除模板
      const handleDeleteTemplate = id => {
          if (id.includes('上线')) {
              message.info('请先下线该模板')
              return
          }
        checkProjectExit(getStatusPrefix(id),isExist=>{
             if(!isExist){
             //   删除
               console.log('删除模板');
               del(`/solution-ppm/api/v2/built-in-system-ppm/project/template/delete/${getStatusPrefix(id)}`).then(data=>{
                 if(data.code===200){
                   message.success('操作成功')
                   getTemplateList()
                 }else{
                   message.error(data.message)
                 }
               })
             }else{
               message.info('该模板已关联项目不允许删除')
             }
        })
      }

      const formatStringBySemi = string => {
          return string.split(/;|；/)
      }

      onMounted(() => {
          getTemplateList()
      })

      // 获取模板列表
      function getTemplateList() {
          post('/solution-ppm/api/v2/built-in-system-ppm/project/template/list', {
              templateName: state.templateName
          }).then(res => {
              res.data.forEach(item => {
                  item.templateId = `${item.templateId}status${item.status}`
              })
              state.templateList = res.data
          })
      }
      // 取id
      function getStatusPrefix(str) {
          str = str.toString()
          const regex = /(\d+)status/i // 匹配status前面的数字
          const match = str.match(regex)
          if (match && match[1]) {
              return parseInt(match[1].trim(), 10) // 返回匹配到的数字并转换为整数
          } else {
              return null // 如果未匹配到，返回null或者其他你认为合适的默认值
          }
      }

      // 查询模版是否被项目中使用
      function checkProjectExit(id, callback) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/project/template/${id}/project_used`).then(({ data }) => {
              callback(data)
          })
      }

      // 查询项目阶段下是否包含任务
      function checkTaskExist(id, callback) {
          if (!id) {
              // 新建
              callback(false)
              return
          }
          get(`/solution-ppm/api/v2/built-in-system-ppm/project/template/stage/{${id}/task_exist`).then(({ data }) => {
              callback(data)
          })
      }

      // 模版状态更新
      function updateTemplateStatus(status, id, callback) {
          put(`/solution-ppm/api/v2/built-in-system-ppm/project/template/${id}/status`, {
              status: status,
              forceFlag: true
          }).then(res => {
              callback(res)
              if (res.status === 'fail') {
                  message.error(res.message)
                  return
              }
              message.success('已进入模板' + status + '审批')
          })
      }

      // 项目阶段更新
      function updateStageList(id, params, callback) {
          post(`/solution-ppm/api/v2/built-in-system-ppm/project/template/${id}/stage/latest`, {
              dataList: params
          }).then(res => {
              if (res.status === 'fail') {
                  message.error(res.message)
                  return
              }
              callback()
          })
      }

      // 查询模板下的任务
      function getTaskList(id, callback) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/project/template/${id}/detail_list`).then(res => {
              state.templateDetailList = groupData(res.data)
              callback && callback()
          })
      }

      function groupData(data) {
          let stageName = ''
          if (!data || !data.length) {
              return []
          }
          return data.map((item, index) => {
              if (stageName !== item.stageName) {
                  stageName = item.stageName
                  let rowSpan = 0
                  for (let i = 0; i < data.length; i++) {
                      if (i >= index) {
                          if (stageName === data[i].stageName) {
                              rowSpan += 1
                          } else {
                              break
                          }
                      }
                  }
                  item.rowSpan = rowSpan
                  item.border = index
              } else {
                  item.rowSpan = 0
              }
              item.rowIndex = index
              return item
          })
      }

      // 查询模板下的项目阶段
      function getStageList(id, callback) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/project/template/${id}/stage/list`).then(res => {
              state.templateStageList = res.data
              callback && callback()
          })
      }

      // 创建任务

      function handleCreateTask(id, callback) {
          if (!state.treeProps.selectedKeys.length) {
              return
          }
          post(
              `/solution-ppm/api/v2/built-in-system-ppm/project/template/${getStatusPrefix(
                  state.treeProps.selectedKeys[0]
              )}/task`,
              state.taskForm
          ).then(res => {
              if (res.code !== 200) {
                  message.error(res.message)
                  return
              }
              state.taskVisible = false
              getTaskList(getStatusPrefix(state.treeProps.selectedKeys[0]), () => {
                  state.taskVisible = false
                  message.success('创建成功')
              })
          })
      }

      function $guid(prefix) {
          function s4() {
              const baseNumber = 0x10000
              const radix = 16
              return Math.floor((1 + Math.random()) * baseNumber)
                  .toString(radix)
                  .substring(1)
          }

          return `${prefix ? `${prefix}-` : ''}${s4()}${s4()}-${s4()}`
      }

      // 修改模板任务
      function handleUpdateTask(id, callback) {
          if (!state.treeProps.selectedKeys.length) {
              return
          }
          put(
              `/solution-ppm/api/v2/built-in-system-ppm/project/template/task/${state.taskForm.templateTaskId}`,
              state.taskForm
          ).then(res => {
              if (res.code !== 200) {
                  message.error(res.message)
                  return
              }
              message.success('更新成功')
              getTaskList(getStatusPrefix(state.treeProps.selectedKeys[0]), () => {
                  state.taskVisible = false
              })
          })
      }

      function downloadFile(info) {
          const { name, url } = info
          let xhr = new XMLHttpRequest()
          xhr.open('GET', url, true)
          xhr.responseType = 'blob'
          xhr.onload = function () {
              if (xhr.status === 200) {
                  if (window.navigator.msSaveOrOpenBlob) {
                      navigator.msSaveBlob(xhr.response, name)
                  } else {
                      let link = document.createElement('a')
                      let body = document.querySelector('body')
                      link.href = window.URL.createObjectURL(xhr.response)
                      link.download = name
                      // fix Firefox
                      link.style.display = 'none'
                      body.appendChild(link)
                      link.click()
                      body.removeChild(link)
                      window.URL.revokeObjectURL(link.href)
                  }
              }
          }
          xhr.send()
      }
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }


  .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-thead) > tr {
      height: 40px;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-thead) > tr > th {
      background: #3875FF;
      font-size: 14px;
      font-family: arial, helvetica, "microsoft yahei";;
      font-weight: 600;
      color: #FFFFFF;
      border-bottom:1px solid #3875ff;
      padding: 8px 16px;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container .@{ant-prefix}-table-thead > tr:not(:last-child) > th {
      border-bottom:1px solid #D9D9D9;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container .@{ant-prefix}-table-thead > tr > th {
      border-right:1px solid #D9D9D9;
    }
    /* 将表格自带的左边框取消，方便设置表头边框颜色和内容边框颜色 */
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container {
      border-left: none;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container .@{ant-prefix}-table-thead > tr > th[colstart='0']:first-child {
      border-left:1px solid #D9D9D9;
    }
    /* 开启粘性表头后，表格结构会发生变化 需另外处理 */
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container .@{ant-prefix}-table-header table {
      border-top:1px solid #D9D9D9;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container > .@{ant-prefix}-table-content > table {
      border-top:1px solid #D9D9D9;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-thead) > tr > th:not(:last-child):not(.@{ant-prefix}-table-selection-column):not(.@{ant-prefix}-table-row-expand-icon-cell):not([colspan])::before {
      background: #D9D9D9;
      width: 1px;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-cell-scrollbar) {
      box-shadow: none;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr {
      height: 40px;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr > td {
      font-size: 14px;
      font-family: arial, helvetica, "microsoft yahei";;
      font-weight: 400;
      color: #262626;
      border-bottom:1px solid #EBEBEB;
      padding: 0 16px;
      word-break: break-all;
      .cell-wrapper {
        padding: 0 16px;
      }
    }

    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr > td .cell-wrapper {
      padding: 0 16px;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-empty .@{ant-prefix}-table-tbody tr > td) {
      padding: 0;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr > td .@{ant-prefix}-btn {
      padding: 0 30px 0 0;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr > td .@{ant-prefix}-btn:last-child {
      padding: 0;
    }
    .vid_a7g6eyj5wh :deep(.table-striped-odd) td {
      background-color: #FFFFFF;
    }
    .vid_a7g6eyj5wh :deep(.table-striped-even) td {
      background-color: #FAFAFA;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container .@{ant-prefix}-table-tbody tr > td {
      border-right:1px solid #EBEBEB;
    }
    .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container .@{ant-prefix}-table-tbody tr > td:first-child {
      border-left:1px solid #EBEBEB;
    }
    .vid_a7g6eyj5wh{
      width: 100%;
      height:100%
    }



    .left-article {
      height:830px;
      display:block;
      background-color:rgba(255, 255, 255, 1);
      border-right-style:solid;
      border-right-width:16px;
      border-right-color:#F5F6FA;
      padding: 24px;
    }
    .left-article .search {
      margin-top: 8px;
      margin-bottom: 16px;
    }

    .right-article {
      background: #fff;
      height:830px;
      padding: 24px;
    }

    .right-article .text {
      padding-left:8px;
      font-weight:600;
      font-size:16px;
      line-height:16px;
      border-left-style:solid;
      border-left-width:4px;
      border-left-color:#3875FF
    }

    .right-article .table-wrapper {
      height: 725px;
    }

    .stage-wrapper {
      width: 100px;
      max-height: 100%;
      text-align: center;
      border: 1px solid #d9d9d9;
      border-radius: 4px 0 0 4px;
      min-height: 183px;
    }
    .stage-wrapper .header {
      width: 100%;
      font-size: 14px;
      color: #fff;
      background: #3875FF;
      height: 39px;
      line-height: 39px;
    }
    .stage-wrapper .list {
      width: 98px;
      font-size: 15px;
      color: #262626;
      font-weight: bold;
      height: calc(100% - 40px);
      overflow: auto;
    }

    .stage-wrapper .list span {
      cursor: pointer;
      display: block;
      margin: 16px 0;
    }
    .ellipsis {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: keep-all;
      overflow-wrap: break-word;
    }
    .download-text {
      color: #3875ff;
      cursor: pointer;
    }

    .task-form .title {
      padding-left:8px;
      font-weight:600;
      line-height:16px;
      margin-bottom: 16px;
      border-left-style:solid;
      border-left-width:4px;
      border-left-color:#3875FF;
      font-size: 16px;
      color: #262626;
    }

    .task-form .tips {
      font-size: 12px;
      color: #8C8C8C;
      letter-spacing: 0;
      margin-top: -15px;
    }
    .table-text {
      min-width:70px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
    }
    .template-delete {
      margin-left: -25px;
      margin-top: 5px;
    }

    .container {
      width: 100%;
      height: 100%;
    }
</style>